{[{define "system/upload/flist.html"}]}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
    <link rel="stylesheet" href="/static/plugs/lay-module/layuimini/layuimini.css" media="all">
    <link rel="stylesheet" href="/static/plugs/lay-module/layuimini/themes/default.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/fileCommon.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">

            <div class="layui-card" style="margin-top: 15px;">
                <div class="layui-card-header">
                    <div class="layadmin-homepage-pad-ver" style="text-align: left">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload">上传图片</button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">

                    <div class="layui-form">

                        <div class="file-list">
                            {[{ range .data }]}
                            <div class="file-list-item"  data-url="{[{.ImageUrl}]}" data-name="{[{.Name}]}" data-ext="{[{.Ext}]}"   data-title="{[{.Name}]}">
                                <div class="file-list-img media " data-id="{[{.Id}]}" >
                                    <img class="lazy" alt="ss" data-original="{[{.ImageUrl}]}"  />
                                </div>
                                <div class="file-list-name">{[{.Name}]}</div>
                                <div class="file-list-ck layui-form">
                                    <input type="radio" name="imgCk" value="{[{.ImageUrl}]}" lay-skin="primary" />
                                </div>
                            </div>
                            {[{ end }]}
                        </div>

                        <!--分页开始-->
                        <div class="layui-row" style="text-align: center;">
                            {[{.page}]}
                        </div>
                        <!--分页结束-->

                        <div class="layui-form-item" >
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0px;text-align: right;">
                                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add">确认选择</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i> 查看 </a></li>
    </ul>
</div>

<script src="/static/admin/js/jquery.min.js"></script>
<script src="/static/admin/js/jquery.lazyload.min.js"></script>
<script>
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn",threshold: 100});
    });
</script>


<script src="/static/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/static/layuimini/js/lay-config.js" charset="utf-8"></script>

<script>
    layui.use(['jquery', 'layer', 'element', 'upload',  'util' ,'form','sh'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var util = layui.util;
        var form = layui.form;
        var sh = layui.sh;

        form.render();

        var mUrl; //素材地址
        var show; //素材类型
        var names; //原始名称
        var _id; //素材id
        // 列表点击事件
        $('body').on('click', '.file-list-item > .file-list-img', function (e) {
            var name = $(this).parent().data('name');
            mUrl = $(this).parent().data('url');
            show=$(this).parent().data('ext');
            names=name;
            _id=parseInt( $(this).data('id'));

            var $target = $(this);
            $('#dropdownFile').css({
                'top': $target.offset().top + 90,
                'left': $target.offset().left + 25
            });
            $('#dropdownFile').addClass('dropdown-opened');
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }
        });


        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#dropdownFile').removeClass('dropdown-opened');
        });


        // 打开
        $('#open').click(function () {
            layer.photos({
                photos: {
                    title: "查看图片",
                    data: [{
                        src: mUrl
                    }]
                },
                shade: .01,
                closeBtn: 1,
                anim: 5
            });
        });

        upload.render({
            elem: '#upload'
            ,url: "/system/upload/add_ajax" //上传地址
            ,accept:'images'
            ,acceptMime:'image/*'
            ,size: 1024*12 //最大允许上传的文件大小
            ,before: function(obj){
                //预读本地文件
            }
            ,done: function(data){
                //上传完毕回调
                if (data.code==200){
                    sh.msg.success(data.msg, function () {
                        //上传成功
                        location.reload();
                    });
                } else {
                    sh.msg.error(data.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                sh.msg.error("网络错误 ");
            }
        });

        form.on('submit(add)', function (data) {
            var val=$('input:radio[name=imgCk]:checked').val();
            // console.log(val);
            if (val==undefined || val===""){
                sh.msg.error("请选择一张图片");
                return  false;
            }
            parent.mFsUrls = val;
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

    });
</script>
</body>
</html>
{[{end}]}